<#assign module="sys"/>

<@override name="header">
    <link rel="stylesheet" href="${ctx}/assets/css/datetimepicker.css">
</@override>
<@override name="body">
    <div class="row">
        <div class="col-xs-12">
            <form class="form-inline" role="form">
                <div class="form-group" style="width:25%;">
                    <input type="text" class="form-control" style="width:100%;" id="location" name="location" value=""
                           placeholder="地址">
                </div>
                <div class="form-group" style="width:5%;">
                    <input type="text" class="form-control" style="width:100%;" id="level" name="level" value="info"
                           placeholder="日志等级">
                </div>
                <div class="form-group" style="width:25%;">
                    <input type="text" class="form-control" style="width:100%;" id="thread" name="thread" value=""
                           placeholder="线程">
                </div>
                <div class="form-group">
                    <input class="form-control" id="start" name="start" placeholder="开始时间" readonly="readonly"
                           type="text" <#if start??>value="${start?string('yyyy-MM-dd hh:mm:ss sss')}"</#if>>
                </div>
                <div class="form-group">
                    <input class="form-control" id="end" name="end" placeholder="结束时间" readonly="readonly" type="text"
                           <#if end??>value="${end?string('yyyy-MM-dd hh:mm:ss sss')}"</#if>>
                </div>
                <button type="submit" class="btn btn-primary"><i class="icon-search"></i>&nbsp;搜索</button>
                <#--	  	<button id="all_button" type="button" class="btn btn-primary"><i class="icon-search"></i>&nbsp;全部</button>-->
                <button id="export_button" type="button" class="btn btn-primary"><i
                            class="glyphicon glyphicon-save"></i>&nbsp;导出
                </button>
            </form>
        </div>
    </div>
    <div class="row margin-top">
        <div class="col-xs-12">
            <div class="panel panel-primary">
                <div class="table-responsive">
                    <table class="table table-hover table-striped">
                        <thead>
                        <tr style="font-size:14px;">
                            <th>时间</th>
                            <th>详情</th>
                            <th>地址</th>
                            <th>线程</th>
                            <th>等级</th>
                        </tr>
                        </thead>
                        <tbody>
                        <#if (page.content)?? >
                            <#list page.content as data>
                                <tr>
                                    <td style="max-width:650px;">${data.happen?if_exists?string("yyyy-MM-dd HH:mm:ss sss")}</td>
                                    <td>${data.info?if_exists}</td>
                                    <td>${data.location?if_exists}</td>
                                    <td>${data.thread?if_exists}</td>
                                    <td>${data.level?if_exists}</td>
                                </tr>
                            </#list>
                        </#if>
                        </tbody>
                    </table>
                    <#if page.totalElements??>
                        <ul class="pagination pull-right pagination-sm">
                            <li><a>共 ${page.totalElements} 条数据</a></li>
                            <@pg.pager items=page.totalElements?number maxPageItems=20 export="currentPageNumber=pageNumber" url="${ctx}/log4JLog/list">
                                <@pg.param name="location" value="${location?if_exists}"/>
                                <#if start??>
                                    <@pg.param name="start" value="${start?string('yyyy-MM-dd HH:mm:ss')}"/>
                                </#if>
                                <#if end??>
                                    <@pg.param name="end" value="${end?string('yyyy-MM-dd HH:mm:ss')}"/>
                                </#if>
                                <@pg.param name="level" value="${level?if_exists}"/>
                                <@pg.param name="thread" value="${thread?if_exists}"/>
                                <@pg.index>
                                    <@pg.first>
                                        <li><a href="${pageUrl}">&laquo;</a></li>
                                    </@pg.first>
                                    <@pg.prev>
                                        <li><a href="${pageUrl}">&lsaquo;</a></li>
                                    </@pg.prev>
                                    <@pg.pages>
                                        <#if  currentPageNumber == pageNumber >
                                            <li class="active"><a href="#">${pageNumber}</a></li>
                                        <#else>
                                            <li><a href="${pageUrl}">${pageNumber}</a></li>
                                        </#if>
                                    </@pg.pages>
                                    <@pg.next>
                                        <li><a href="${pageUrl}">&rsaquo;</a></li>
                                    </@pg.next>
                                    <@pg.last>
                                        <li><a href="${pageUrl}">&raquo;</a></li>
                                    </@pg.last>
                                </@pg.index>
                            </@pg.pager>
                        </ul>
                    </#if>
                </div>
            </div>
        </div>
    </div>

    <!--导出-->
    <div class="form-horizontal">
        <div class="modal fade" id="dialog_export" data-backdrop="static">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="false">&times;</button>
                        <h4 class="modal-title">正在导出...，请不要刷新或离开当前页面</h4>
                    </div>
                    <div class="modal-body">
                        <div class="progress" id="export_process" style="display:none;">
                            <div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 1%">
                                <span>0% 已完成</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12" id="errormessage_div">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</@override>
<@override name="footer">
    <script src="${ctx}/assets/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${ctx}/assets/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${ctx}/assets/js/log4jlog/log4JLog.js"></script>
    <script type="text/javascript">

    </script>
</@override>
<@extends name="../layout.ftl"/>